<script setup>
import * as echarts from 'echarts';


import { nextTick, onMounted, ref, watch } from 'vue';

let props = defineProps({
  propmsg: Object,
});
let myChart = null;
// 初始化数据
const meg = ref(props.propmsg?.time7?.leakage || 1,);

watch(() => props.propmsg, (newdata) => {
  console.log('mm', meg.value);
  meg.value = newdata?.time7?.leakage || 1;

  if (myChart) {
    myChart.setOption({
      series: [
        {
          data: [
            {
              value: meg.value * 0.01,
              name: '漏损率',
            },
          ],
        },
      ],
    });
  }

}, { immediate: true, deep: true })


onMounted(() => {

  var chartDom = document.getElementById('main1');

  nextTick(() => {
    if (myChart) {
      myChart.dispose();
    }

    myChart = echarts.init(chartDom);
    var option;
    option = {
      series: [
        {
          type: 'gauge',
          startAngle: 180,
          endAngle: 0,
          center: ['50%', '75%'],
          radius: '90%',
          min: 0,
          max: 1,
          splitNumber: 8,
          axisLine: {
            lineStyle: {
              width: 3,
              color: [
                [0.25, '#FF6E76'],
                [0.5, '#FDDD60'],
                [0.75, '#58D9F9'],
                [1, '#7CFFB2']
              ]
            }
          },
          pointer: {
            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
            length: '12%',
            width: 10,
            offsetCenter: [0, '-60%'],
            itemStyle: {
              color: 'auto'
            }
          },
          axisTick: {
            length: 12,
            lineStyle: {
              color: 'auto',
              width: 1
            }
          },
          splitLine: {
            length: 20,
            lineStyle: {
              color: 'auto',
              width: 5
            }
          },
          axisLabel: {
            color: '#464646',
            fontSize: 10,
            distance: -60,
            rotate: 'tangential',
            formatter: function (value) {
              //   if (value === 0.875) {
              //     return 'Grade A';
              //   } else if (value === 0.625) {
              //     return 'Grade B';
              //   } else if (value === 0.375) {
              //     return 'Grade C';
              //   } else if (value === 0.125) {
              //     return 'Grade D';
              //   }
              //   return '';
            }
          },
          title: {
            offsetCenter: [0, '-10%'],
            fontSize: 10
          },
          detail: {
            fontSize: 10,
            offsetCenter: [0, '-35%'],
            valueAnimation: true,
            formatter: function (value) {
              return Math.round(value * 100) + '';
            },
            color: 'inherit'
          },
          data: [
            {
              value: meg.value * 0.01,
              name: '漏损率'
            }
          ]
        }
      ]
    };

    option && myChart.setOption(option);
  })

})



</script>

<template>
  <div id="main1"></div>
</template>

<style scoped lang="scss">
#main1 {
  width: 100%;
  height: 100%;
}
</style>